<template>
  <basic-container>
    <h3 class="title-header">证书分类</h3>
    <div class="mb10">
      <el-button type="primary" icon="plus" @click="onclick(0)">新建</el-button>
      <el-button type="danger" plain icon="delete" @click="rowDel">删除</el-button>
      <el-button type="warning" plain icon="edit" @click="onclick(1)">编辑</el-button>
    </div>
    <div v-if="data.length" class="cagory-list">
      <p v-for="(item, index) in data"
         @click="changeCurrent(index)"
         class="title c-item"
         :class="index == isCurrent ? 'active' : ''"
      >{{ item.name }}</p>
    </div>
    <div v-else class="text-center">
      暂时没有分类
    </div>

    <el-dialog v-model="isShow" :title="isCreateOrUpadate ? '编辑' : '新建'" @close="isShow = false">
      <el-form-item label="分类名称">
        <el-input v-model="query.name" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="分类编号">
        <el-input v-model="query.code" placeholder="请输入分类编号"></el-input>
      </el-form-item>
      <el-form-item label="分类备注">
        <el-input v-model="query.note" type="textarea" placeholder="请输入分类备注"></el-input>
      </el-form-item>
      <el-button type="primary" icon="plus" @click="rowSave">
        {{ isCreateOrUpadate ? '更新' : '创建' }}
      </el-button>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getList, add, update, remove } from '@/api/position/certificate-classification';

export default {
  data() {
    return {
      isCreateOrUpadate: false,
      isCurrent: 0,
      data: [],
      isShow: false,
      query: {
        name: '',
        code: '',
        note: ''
      }
    };
  },
  computed:{
    categoryId(){
      if(this.isCurrent>-1){
        return this.data[this.isCurrent].id
      }
      return ''
    }
  },
  created() {
    this.onLoad();
  },
  methods: {
    changeCurrent(index) {
      this.isCurrent = index;
      this.$emit('categoryChange',this.categoryId)
    },
    onclick(boo) {
      this.isCreateOrUpadate = boo;
      this.query = boo ? this.data[this.isCurrent] : {
        name: '',
        code: '',
        note: ''
      };
      this.isShow = true;
      // console.log(this.query);
    },
    rowSave() {
      if (this.isCreateOrUpadate) {
        update(this.query).then(() => {
          this.onLoad();
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        });
      } else {
        add(this.query).then(() => {
          this.onLoad();
          this.$message({
            type: 'success',
            message: '创建成功!'
          });
        });
      }
    },
    rowDel() {
      if (!this.categoryId) {
        this.$message({
          type: 'error',
          message: '请先选择一个分类!'
        });
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(this.categoryId);
        })
        .then(() => {
          this.onLoad();
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
    },
    onLoad() {
      this.isShow = false;
      getList().then(res => {
        this.data = res.data.data.records;
        this.$emit('categoryChange',this.data[this.isCurrent].id)
      });
    }
  }
};
</script>

<style scoped>
.title-header {
  margin: 0 0 10px;
}

.title {
  margin: 0;
}

.title:hover {
  color: rgb(0, 0, 0);
  background-color: rgba(171, 169, 166, .1);
  cursor: pointer;
}

.title.active {
  background-color: var(--el-color-primary-light-7);
  color: var(--el-color-primary)
}
.cagory-list{
  display: flex;
  flex-direction: column;
  .c-item{
    padding: 10px;
  }
}
</style>